import * as React from 'react';
import { Image } from 'react-native';
import { ImageResultProps } from '../App.styles';
import ExampleOverlayImage from './ExampleOverlayImage';
import ExamplePrintText from './ExamplePrintText';
import { IMAGE, OVERLAY } from './settings';
import ExampleCrop from './ExampleCrop';
import ExampleOptimize from './ExampleOptimize';
import ExampleBatch from './ExampleBatch';
import ExampleFlip from './ExampleFlip';
import ExampleRotate from './ExampleRotate';

import ExampleJpegOverlayImage from './Jpeg/ExampleJpegOverlayImage';
import ExampleJpegPrintText from './Jpeg/ExampleJpegPrintText';
import ExampleJpegCrop from './Jpeg/ExampleJpegCrop';
import ExampleJpegOptimize from './Jpeg/ExampleJpegOptimize';
import ExampleJpegBatch from './Jpeg/ExampleJpegBatch';
import ExampleJpegFlip from './Jpeg/ExampleJpegFlip';
import ExampleJpegRotate from './Jpeg/ExampleJpegRotate';
import { IMAGEJPEG, OVERLAYJPEG } from './Jpeg/settings';

import ExamplePngOverlayImage from './png/ExamplePngOverlayImage';
import ExamplePngPrintText from './png/ExamplePngPrintText';
import ExamplePngCrop from './png/ExamplePngCrop';
import ExamplePngOptimize from './png/ExamplePngOptimize';
import ExamplePngBatch from './png/ExamplePngBatch';
import ExamplePngFlip from './png/ExamplePngFlip';
import ExamplePngRotate from './png/ExamplePngRotate';
import { IMAGEPNG, OVERLAYPNG } from './png/settings';

export interface Example {
  id: string;
  title: string;
  description: string;
  render: () => React.ReactNode;
}

const EXAMPLES: Example[] = [
  {
    id: 'originalImage',
    title: 'Source Image',
    description: 'Original Source Image size 1120 * 800',
    render: () => <Image {...ImageResultProps} source={{ uri: IMAGE }} />,
  },
  {
    id: 'overlayImage',
    title: 'Overlay Image',
    description: 'Overlay Image size 200 * 141',
    render: () => (
      <Image
        {...ImageResultProps}
        resizeMode="center"
        source={{ uri: OVERLAY }}
      />
    ),
  },
  {
    id: 'exampleFlip',
    title: 'flipImage()',
    description: 'Flip image horizontally of vertically',
    render: () => <ExampleFlip />,
  },
  {
    id: 'exampleRotate',
    title: 'rotateImage()',
    description: 'Rotate image 90°, 180° or 270°',
    render: () => <ExampleRotate />,
  },
  {
    id: 'exampleOverlayImage',
    title: 'overlayImage()',
    description: 'Overlay image to background image at 30, 65',
    render: () => <ExampleOverlayImage />,
  },
  {
    id: 'examplePrintText',
    title: 'printText()',
    description: 'Print text into image',
    render: () => <ExamplePrintText />,
  },
  {
    id: 'exampleCrop',
    title: 'crop()',
    description: 'Crop Image & Resize if specified targetSize',
    render: () => <ExampleCrop />,
  },
  {
    id: 'exampleOptimize',
    title: 'optimize()',
    description: 'Reduce image quality',
    render: () => <ExampleOptimize />,
  },
  {
    id: 'exampleBatch',
    title: 'batch()',
    description: 'Do everything in one operation',
    render: () => <ExampleBatch />,
  },

  {
    id: 'originalBmpJpegImage',
    title: 'Source Image Jpeg',
    description: 'Original Source Image size 1120 * 800',
    render: () => <Image {...ImageResultProps} source={{ uri: IMAGEJPEG }} />,
  },
  {
    id: 'overlayBmpJpegImage',
    title: 'Overlay Image Jpeg',
    description: 'Overlay Image size 200 * 141',
    render: () => (
      <Image
        {...ImageResultProps}
        resizeMode="center"
        source={{ uri: OVERLAYJPEG }}
      />
    ),
  },
  {
    id: 'exampleBmpJpegFlip',
    title: 'flipImage() Jpeg',
    description: 'Flip image horizontally of vertically',
    render: () => <ExampleJpegFlip />,
  },
  {
    id: 'exampleBmpJpegRotate',
    title: 'rotateImage() Jpeg',
    description: 'Rotate image 90°, 180° or 270°',
    render: () => <ExampleJpegRotate />,
  },
  {
    id: 'exampleBmpJpegOverlayImage',
    title: 'overlayImage() Jpeg',
    description: 'Overlay image to background image at 30, 65',
    render: () => <ExampleJpegOverlayImage />,
  },
  {
    id: 'exampleBmpJpegPrintText',
    title: 'printText() Jpeg',
    description: 'Print text into image',
    render: () => <ExampleJpegPrintText />,
  },
  {
    id: 'exampleBmpJpegCrop',
    title: 'crop() Jpeg',
    description: 'Crop Image & Resize if specified targetSize',
    render: () => <ExampleJpegCrop />,
  },
  {
    id: 'exampleBmpJpegOptimize',
    title: 'optimize() Jpeg',
    description: 'Reduce image quality',
    render: () => <ExampleJpegOptimize />,
  },
  {
    id: 'exampleBmpJpegBatch',
    title: 'batch() Jpeg',
    description: 'Do everything in one operation',
    render: () => <ExampleJpegBatch />,
  },


  {
    id: 'originalPngImage',
    title: 'Source Image Png',
    description: 'Original Source Image size 1120 * 800',
    render: () => <Image {...ImageResultProps} source={{ uri: IMAGEPNG }} />,
  },
  {
    id: 'overlayPngImage',
    title: 'Overlay Image Png',
    description: 'Overlay Image size 200 * 141',
    render: () => (
      <Image
        {...ImageResultProps}
        resizeMode="center"
        source={{ uri: OVERLAYPNG }}
      />
    ),
  },
  {
    id: 'examplePngFlip',
    title: 'flipImage() Png',
    description: 'Flip image horizontally of vertically',
    render: () => <ExamplePngFlip />,
  },
  {
    id: 'examplePngRotate',
    title: 'rotateImage() Png',
    description: 'Rotate image 90°, 180° or 270°',
    render: () => <ExamplePngRotate />,
  },
  {
    id: 'examplePngOverlayImage',
    title: 'overlayImage() Png',
    description: 'Overlay image to background image at 30, 65',
    render: () => <ExamplePngOverlayImage />,
  },
  {
    id: 'examplePngPrintText',
    title: 'printText() Png',
    description: 'Print text into image',
    render: () => <ExamplePngPrintText />,
  },
  {
    id: 'examplePngCrop',
    title: 'crop() Png',
    description: 'Crop Image & Resize if specified targetSize',
    render: () => <ExamplePngCrop />,
  },
  {
    id: 'examplePngOptimize',
    title: 'optimize() Png',
    description: 'Reduce image quality',
    render: () => <ExamplePngOptimize />,
  },
  {
    id: 'examplePngBatch',
    title: 'batch() Png',
    description: 'Do everything in one operation',
    render: () => <ExamplePngBatch />,
  },
];

export default EXAMPLES;


